<template>
  <div class="background-image">
    <div class="background-context">
      <p class="title">后台管理平台</p>
      <div class="background-context-next">
        <div class="background-login">
          <div class="background-user">
            <el-input v-model="userName" placeholder="请输入工号/手机号码" clearable style="width: 280px" />
          </div>
          <div class="background-pws">
            <el-input v-model="pws" type="password" password clearable placeholder="请输入密码" style="width: 280px" />
          </div>
          <p class="forgetPassword"><span @click="forgetPassword">找回密码?</span></p>
          <div class="background-submit" @click="loginClick">登录</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userName:"",
      pws:""
    }
  },
  created() {
  },
  methods: {
    forgetPassword(){
        
    },
    loginClick(){
      if (!this.userName) {
        this.$message.error('账号不能为空');
        return
      }
      if (!this.pws) {
        this.$message.error('密码不能为空')
        return
      }
    },
  }
}
</script>
<style scoped>
.title{
	font-size: 24px;
	padding: 40px 0;
	font-weight: bold;
	text-align: center;
}
.forgetPassword{
	text-align:right;
	padding-top:20px;
}
.forgetPassword span{
  cursor: pointer;
  color:#EA5421;
  font-size:14px;
  font-weight: bold;
}

	* {
		margin: 0;
		padding: 0;
	}
	.background-loginImage{
		top: 0px;
		width: 100%;
		height: 100%;

	}
	.background-image {
		top: 0px;
		width: 100%;
		height: 100%;
		background-image: url(../../assets/login-bac.png);
        background-size: cover;
		background-repeat:no-repeat;
		position: fixed;/*头部悬浮不移动*/
	}
	.background-context{
		margin-left: auto;
		margin-right:8%;
		margin-top: 14%;
		background: #FFFFFF;
		width: 350px;
        border-radius: 12px;
        padding-bottom: 80px;
	}
	.background-context-next{
		width: 100%;
	}
	.background-login{
		width: 80%;
		height: 60%;
		margin-left: auto;
		margin-right: auto;
	}
  .comName{
    margin-bottom: 30px;
  }
	.background-user{
		width: 100%;
		height: 20%;
		background: #FFFFFF;
	}
	.background-pws{
		width: 100%;
		height: 20%;
		background: #FFFFFF;
		margin-top: 25px;

	}
	.background-submit{
		margin-top: 20px;
		line-height: 40px;
		width: 100%;
		height: 20%;
		text-align: center;
		font-size: 18px;
		color: #FFFFFF;
		background: #2483D5;
    cursor: pointer;
	}
	.text-user{
		width: 100%;
		height: 100%;
	}
	.text-pwd{
		width: 100%;
		height: 100%;
	}
</style>